<template>
	<div class="cmp-subTitle" :style="{'justify-content': align}">
		<div class="sub-title-name">
			<div v-if="hasIcon" class="sub-title-icon"></div>
			{{title}}
		</div>
		<div v-show="shouMore" class="more-page" @click="getMore">更多</div>
	</div>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: ''
			},
			shouMore: {
				type: Boolean,
				default: true
			},
			hasIcon: {
				type: Boolean,
				default: true
			},
			align: {
				type: String,
				default: 'left'
			}
		},
		methods: {
			getMore() {
				this.$emit('getmore')
			}
		}
	}
</script>

<style lang="less">
	@defaultColor: #2a82e4;

	.cmp-subTitle {
		width: 100%;
		padding: 30px 0;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		position: relative;
		width: 100%;

		.sub-title-name {
			font-size: 28px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 500;
			color: #000000;
			line-height: 30px;
			position: relative;
			padding-left: 24px;
		}

		.sub-title-icon {
			position: absolute;
			top: 50%;
			left: 3px;
			width: 10px;
			height: 28px;
			transform: translateY(-50%);
			background-color: @defaultColor;
		}

		.more-page {
			position: absolute;
			top: 50%;
			right: 20px;
			transform: translateY(-50%);
			cursor: pointer;
			font-size: 16px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #858585;
		}
	}
</style>